<template>
  <div class='app-container calendar-list-container'>

    <!-- 查询和其他操作 -->
    <div class='filter-container'>
      <el-button class='filter-item' type='primary' icon='el-icon-search' @click='handleFilter'>刷新</el-button>
      <!-- <el-button class='filter-item' type='primary' @click='handleCreate' icon='el-icon-edit'>添加</el-button>
      <el-button class='filter-item' type='primary' :loading='downloadLoading' icon='el-icon-download' @click='handleDownload'>导出</el-button> -->
    </div>

    <!-- 查询结果 -->
    <el-table size='small' :data='list' v-loading='listLoading' element-loading-text='正在查询中。。。' border fit highlight-current-row>

      <el-table-column align='center' width='100px' label='配置项ID' prop='id' sortable>
      </el-table-column>

      <el-table-column align='center' min-width='80px' label='配置名称' prop='name'>
      </el-table-column>

      <el-table-column align='center' min-width='80px' label='配置说明' prop='description'>
      </el-table-column>
      <el-table-column align='center' min-width='80px' label='验证信息描述' prop='regexpInfo'>
      </el-table-column>
      <el-table-column align='center' min-width='80px' label='验证信息验证' prop='regexpValidator'>
      </el-table-column>
      <el-table-column align='center' min-width='80px' label='配置值' prop='value'>
      </el-table-column>

      <el-table-column align='center' label='操作' width='250' class-name='small-padding fixed-width'>
        <template slot-scope='scope'>
          <el-button type='primary' size='mini' @click='handleUpdate(scope.row)'>编辑</el-button>
          <el-button type='danger' size='mini'  @click='handleDelete(scope.row)'>删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class='pagination-container'>
      <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' :current-page='listQuery.page'
        :page-sizes='[10,20,30,50]' :page-size='listQuery.limit' layout='total, sizes, prev, pager, next, jumper' :total='total'>
      </el-pagination>
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog :title='textMap[dialogStatus]' :visible.sync='dialogFormVisible'>
      <el-form :rules='rules' ref='dataForm' :model='dataForm' status-icon label-position='left' label-width='100px' style='width: 400px margin-left:50px'>
        <el-form-item label='配置名' prop='name'>
          <el-input v-model='dataForm.name' :readonly=true></el-input>
        </el-form-item>
        <el-form-item label='配置说明' prop='description'>
          <el-input type='textarea' :rows='2' v-model='dataForm.description'  auto-complete='off'></el-input>
        </el-form-item>
        <el-form-item label='验证信息描述' prop='regexpInfo'>
          <el-input type='textarea' :rows='2' v-model='dataForm.regexpInfo' auto-complete='off'></el-input>
        </el-form-item>
        <el-form-item label='配置值' prop='value'>
          <el-input v-model='dataForm.value' controls-position='right'></el-input>
        </el-form-item>
      </el-form>
      <div slot='footer' class='dialog-footer'>
        <el-button @click='dialogFormVisible = false'>取消</el-button>
        <el-button v-if="dialogStatus=='create'" type='primary' @click='createData'>确定</el-button>
        <el-button v-else type='primary' @click='updateData'>确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listConfig, deleteConfig, updateConfig } from '@/api/config'

export default {
  name: 'Config',
  data() {
    var validateValue = (rule, value, callback) => {
      var reg = new RegExp(this.dataForm.regexpValidator)
      var regText = this.dataForm.regexpInfo
      if (value === '') {
        callback(new Error('请输入配置值'))
      } else if (!reg.test(value)) {
        callback(new Error(regText === '' ? '' : regText))
      } else {
        callback()
      }
    }
    return {
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        sort: '+id'
      },
      dataForm: {
        id: undefined,
        name: undefined,
        description: undefined,
        regexpInfo: undefined,
        regexpValidator: undefined,
        value: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      rules: {
        value: [
          { required: true, message: '配置值不能为空', trigger: 'blur' },
          { validator: validateValue, trigger: 'blur' }
        ]
      },
      downloadLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      listConfig(this.listQuery)
        .then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    resetForm() {
      this.dataForm = {
        id: undefined,
        username: undefined,
        password: undefined,
        checkPassword: undefined,
        avatar: undefined
      }
    },
    handleUpdate(row) {
      // console.log(row)
      this.dataForm = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          updateConfig(this.dataForm).then(() => {
            for (const v of this.list) {
              if (v.id === this.dataForm.id) {
                const index = this.list.indexOf(v)
                this.list.splice(index, 1, this.dataForm)
                break
              }
            }
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleDelete(row) {
      if (!row.deletable) {
        this.$message.error('此配置项不可删除')
        return
      }
      this.$confirm('此操作将删除该配置项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteConfig(row).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
